<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖动的小球</title>
    <style>
        #ball {
            width: 500px;
            height: 500px;
            background-color: #63e2ee;
            border-radius: 50%;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="ball"></div>
<script>
    document.getElementById('ball').onmousedown = function(e) {
        var ball = this;
        var offsetX = e.clientX - ball.offsetLeft;
        var offsetY = e.clientY - ball.offsetTop;

        document.onmousemove = function(e) {
            ball.style.left = e.clientX - offsetX + 'px';
            ball.style.top = e.clientY - offsetY + 'px';
        };

        document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
        };
    };
</script>
</body>
</html>